import React, { useState } from 'react'
import { reqLogin, reqRegisterUser } from '../api/user';
import { useDispatch } from 'react-redux';
import { login } from '../store/modules/userStore';
import { useLocation, useNavigate } from 'react-router-dom';
import { reqAddStudent } from '../api/student';
//登录&注册表单
// export async function action({ request, params }) {
//     try {
//         const formData = await request.formData();
//         //获取表单数据
//         const username = formData.get('username')
//         const password = formData.get('password')
//         // Object.fromEntries() 静态方法将键值对列表转换为一个对象。
//         const data = Object.fromEntries(formData)
//         console.log(username, password, data);
//         if (data.hasOwnProperty('email')) {//有邮箱发注册请求
//              await reqRegisterUser(data)//发送注册请求
//              return redirect(`/authForm`);//注册成功重定向到登录页面
//         } else {//没有邮箱发登录请求

//         }
//     } catch (error) {//请求失败错误会被捕获

//         console.log('err', error.response.data);

//     }
//     return null

// }
function AuthForm() {
    const [isLoginForm, setIsLoginForm] = useState(true)
    const [username, setUserName] = useState('')
    const [password, setPassword] = useState('')
    const [email, setEmail] = useState('')
    const [errorMessage, setErrorMessage] = useState('')
    //获取store的dispatch
    const dispatch = useDispatch()
    //跳转页面的钩子
    const navigate = useNavigate()
    //获取location得到state
    const location = useLocation()
    //   这里使用了es6？可选链语法
    console.log(location.state?.preLocation);
    // 提交或注册按钮回调
    const submitHandler = async (e) => {
        e.preventDefault();//取消表单按钮的默认行为
        //根据isLoginForm判断时在登录还是注册
        try {
            if (isLoginForm) {//登录
                console.log('登录', username, password);
                //收集信息发送登录请求
                const { jwt, user } = await reqLogin({
                    identifier: username,
                    password: password
                })
                // console.log(res);
                //登录成功后，需要保存用户的token和登录状态
                dispatch(login({ token: jwt, user: user }))
                //重定向到根页面或者用户输入需要登录才能访问的页面
                navigate(location.state?.preLocation||'/', { replace: true })

            } else {//注册
                console.log('注册', username, password, email);
                //收集信息发送注册请求
                const res = await reqRegisterUser({ username: username, password: password, email: email })
                console.log(res);
                //注册成功显示登录页面
                setIsLoginForm(true)
                setErrorMessage('')
            }

        } catch (error) {
            const { response: { data: errordata } } = error
            console.log('errordata', errordata);
            setErrorMessage(errordata.error.message)
        }

    }
    return (
        <div>
            {errorMessage && <p style={{ color: 'red' }}>请求错误信息：{errorMessage}</p>}
            <h2>{isLoginForm ? '登录' : '注册'}</h2>
            <form method='post'>
                <div>
                    <label>
                        用户名：
                        <input
                            value={username}
                            type="text"
                            placeholder='用户名'
                            name='username'
                            onChange={(e) => { setUserName(e.target.value) }} />
                    </label>
                </div>
                {!isLoginForm &&
                    <div>
                        <label>
                            电子邮件：
                            <input
                                value={email}
                                type="email"
                                placeholder='电子邮件'
                                name='email'
                                onChange={(e) => { setEmail(e.target.value) }} />
                        </label>

                    </div>}
                <div>
                    <label>
                        密码：
                        <input
                            value={password}
                            type="password"
                            placeholder='密码'
                            name='password'
                            onChange={(e) => { setPassword(e.target.value) }} />
                    </label>

                </div>
                <div>
                    <button type='submit' onClick={(e) => submitHandler(e)}>{isLoginForm ? '登录' : '注册'}</button>

                </div>
            </form>
            <div>
                <button type='normal' onClick={() => { setIsLoginForm(pre => !pre) }}>{isLoginForm ? '没有账号？点击注册' : '已有账号？点击登录'}
                </button>
            </div>
        </div>
    )
}

export default AuthForm